<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
         p{
            position: absolute;
            left:420px; top: 50px;
            padding: 10px 30px;
            color: white;
            font-size: 20px;
            font-family: "Microsoft Yahei";
            
        }
        #canvas{
            cursor: pointer;
            background:#eee;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src='../js/ball.js'></script>
    <script src="../js/line.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            canvas.width = document.body.clientWidth;
            canvas.height = document.body.scrollHeight;

            var ball0 = new Ball(80, "#ff0000"),
                ball1 = new Ball(40),
                bounce = -1;
            
            ball0.mass = 2;
            ball0.x = 100;
            ball0.y = 100;
            ball0.vx = Math.random()*10 -5;
            ball0.vy = Math.random()*10 -5;
            
            ball1.mass = 1;
            ball1.x = 300;
            ball1.y = 300;
            ball1.vx = Math.random()*10 -5;
            ball1.vy = Math.random()*10 -5;
            
            //墙体碰撞检测
            function wallCollsion(ball){
                if(ball.x + ball.radius > canvas.width){
                    ball.x = canvas.width - ball.radius;
                    ball.vx *= bounce;
                }else if(ball.x < ball.radius){
                    ball.x = ball.radius;
                    ball.vx *= bounce;
                }
                
                if(ball.y + ball.radius > canvas.height){
                    ball.y = canvas.height - ball.radius;
                    ball.vy *= bounce;
                }else if(ball.y < ball.radius){
                    ball.y = ball.radius;
                    ball.vy *= bounce;
                } 
            }
            
            //球体碰撞
            
            function ballCollsion(ballA, ballB){
                var dx = ballA.x - ballB.x,
                    dy = ballA.y - ballB.y,
                    dist = Math.sqrt(dx*dx + dy*dy);
                
                if(dist < ballA.radius + ballB.radius){
                    var vxTotal = ballA.vx - ballB.vx;
                    var vxAFinal = ((ballA.mass - ballB.mass)*ballA.vx + 2*ballB.mass*ballB.vx)/(ballA.mass+ballB.mass);
                    var vxBFinal = vxTotal + vxAFinal;
                    
                    ballA.vx = vxAFinal;
                    ballB.vx = vxBFinal;
                    
                    ballA.x += ballA.vx;
                    ballB.x += ballB.vx;
                    
                    
                    var vyTotal = ballA.vy - ballB.vy;
                    var vyAFinal = ((ballA.mass - ballB.mass)*ballA.vy + 2*ballB.mass*ballB.vy)/(ballA.mass+ballB.mass);
                    var vyBFinal = vyTotal + vyAFinal;
                    
                    ballA.vy = vyAFinal;
                    ballB.vy = vyBFinal;
                    
                    ballA.y += ballA.vy;
                    ballB.y += ballB.vy;
                    
                    
                }
            }
            
            
            (function drawFrame(){
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                ball0.x += ball0.vx;
                ball0.y += ball0.vy;
                ball1.x += ball1.vx;
                ball1.y += ball1.vy;
                
                //球体碰撞检测
                ballCollsion(ball0, ball1);
                
                //墙体碰撞检测
                wallCollsion(ball0);
                wallCollsion(ball1);
                
                
                ball0.draw(context);
                ball1.draw(context);
            }())
        }
        
    //遵循动量守恒和能量守恒的碰撞后的速度大小
// v0Final = ((m0 - m1)*v0 + 2*m1*v1) / (m0 + m1);
// v1Final = ((m1 - m0)*v1 + 2*m0*v0) / (m0 + m1);

// //精简版
// var vxTotal = vx0 - vx1;
// vx0 = ((ball0.mass - ball1.mass)*vx0 + 2*ball1.mass*vx1)/(ball0.mass + ball1.mass);
// vx1 = vxTotal + vx0;

    </script>
</body>
</html>
